<template>
  <div id="paicharts3"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "PAicharts2",
  data() {
    return {
      chart: null,
      options: null,
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.initcharts();
    });
  },
  
  methods: {
    initcharts() {
      this.chart = echarts.init(document.getElementById("paicharts3"));
      var data = [
      {
         "name": "官路镇",
         "value": 954
      },
      {
         "name": "埠头镇",
         "value": 1337
      },
      {
         "name": "大战乡",
         "value": 1593
      },
      {
         "name": "广度乡",
         "value": 1827
      },
      {
         "name": "安岭乡",
         "value": 1918
      },
      {
         "name": "朱溪镇",
         "value": 1941
      },
      {
         "name": "横溪镇",
         "value": 2168
      },
      {
         "name": "南峰街道",
         "value": 2229
      },
      {
         "name": "双庙乡",
         "value": 2367
      },
      {
         "name": "上张乡",
         "value": 2736
      },
      {
         "name": "淡竹乡",
         "value": 2844
      },
      {
         "name": "田市镇",
         "value": 2889
      },
      {
         "name": "福应街道",
         "value": 3143
      }
   ],
   names = [], values = [];
data.forEach((item) => {
   names.push(item.name);
   values.push(item.value);
})

      this.options = {
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow'
      }
   },
   grid: {
      left: 20,
      right: 40,
      top:10,
      bottom: 20,
      containLabel: true
   },
   xAxis: {
      type: 'value',
      splitNumber: 3,
      axisTick: {
         show: false
      },
      axisLine: {
         show: false
      },
      axisLabel: {
         textStyle: {
            color: "#fff",
            fontSize: 14
         }
      },
      splitLine: {
         show: false
      }
   },
   yAxis: {
      type: 'category',
      data: names,
      axisTick: {
         show: false,
         alignWithLabel: true
      },
      axisLine: {
         show: false
      },
      axisLabel: {
         interval: 0,
         // rotate: 30,
         textStyle: {
            color: "#fff",
            fontSize: 14
         }
      },
      splitLine: {
         show: false
      }
   },
   series: [{
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
         color: 'rgba(180, 180, 180, 0.2)'
      },
      itemStyle: {
         borderRadius: 10,
         color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
               { offset: 0, color: '#347CDD' }, // 0% 处的颜色
               { offset: 1, color: '#56fb93' } // 100% 处的颜色
            ],
            global: false // 缺省为 false
         }
      },
      label: {
         show: true,
         position: 'right',
         color: '#fff',
         fontSize: 14
      },
      data: values
   }]
}

      this.chart.setOption(this.options);
    },
  },
};
</script>

<style lang="scss" scoped>
#paicharts3 {
  height: 300px;
  width: 640px;
}
</style> 